<template>
    <div class="app-salesman">
        <el-row style="width: 100%;" :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-menu
                        :default-active="defaultActive"
                        class="el-menu-vertical-demo"
                        router
                    >
                        <el-menu-item index="/project1">
                            <i class="el-icon-menu"></i>
                            <span slot="title">project1</span>
                        </el-menu-item>
                        <el-menu-item index="/project2">
                            <i class="el-icon-document"></i>
                            <span slot="title">project2</span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="grid-content bg-purple">
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            defaultActive: '/project1',
        };
    },
    mounted() {
        // const { pathname } = window.location;
        // console.log('project', this.$route, pathname);
        // this.defaultActive = `/${pathname.split('/')[2]}`;
    },
    watch: {
        $route: {
            handler: function(newVal) {
                console.log('project', newVal);
                this.defaultActive = `/${newVal.path.split('/')[1]}`;
            },
            immediate: true
        },
    },
};
</script>

<style>
.app-salesman {
    /* color: red; */
}
.router-link-active {
    color: orange;
}
</style>
